<template>
  <div class="DcnBottom">
    <CodeCard v-bind="btnDesc">
      <el-row>
        <sdn-button @click="message">message消息提示</sdn-button>
        <sdn-button @click="notification">notification通知</sdn-button>
        <sdn-button @click="notGlobal">只在当前页面显示</sdn-button>
      </el-row>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>
import {SdnMultiFunMessage} from '../../../../packages';

export default {
  methods: {
    message() {
      SdnMultiFunMessage({
        messageType: 'Message',
        message: 'message 消息提示',
        type: 'success'
      })
    },
    notification() {
      SdnMultiFunMessage({
        message: 'notification 通知',
        type: 'success'
      })
    },
    notGlobal() {
      SdnMultiFunMessage({
        globalShow: false,
        message: '只在触发页面显示此消息',
        type: 'success'
      })
    }
  },
  setup() {
    let btnDesc = {
      title: "multiFunMessage 多功能消息提示",
      describe: "支持消息提示和通知功能；支持消息提示和通知功能全局切换；支持只在触发页面显示和全局显示",
      codeBlock: `<sdn-button @click="message">message消息提示</sdn-button>
        <sdn-button @click="notification">notification通知</sdn-button>
        <sdn-button @click="notGlobal">只在当前页面显示</sdn-button>
methods: {
    message() {
      SdnMultiFunMessage({
        messageType: 'Message',
        message: 'message 消息提示',
        type: 'success'
      })
    },
    notification() {
      SdnMultiFunMessage({
        message: 'notification 通知',
        type: 'success'
      })
    },
    notGlobal() {
      SdnMultiFunMessage({
        globalShow: false,
        message: '只在触发页面显示此消息',
        type: 'success'
      })
    }
  }`,
      attrs: [
        {"name": "title", "describe": "标题", "type": "string", "emun": "—", "default": "—"}, {
          "name": "message",
          "describe": "消息文字",
          "type": "string / VNode",
          "emun": "—",
          "default": "—"
        }, {
          "name": "type",
          "describe": "主题",
          "type": "string",
          "emun": "success/warning/info/error",
          "default": "info"
        }, {
          "name": "iconClass",
          "describe": "自定义图标的类名，会覆盖 type",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "dangerouslyUseHTMLString",
          "describe": "是否将 message 属性作为 HTML 片段处理",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "customClass",
          "describe": "自定义类名",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "duration",
          "describe": "显示时间, 毫秒。设为 0 则不会自动关闭",
          "type": "number",
          "emun": "—",
          "default": "3000"
        }, {
          "name": "showClose",
          "describe": "是否显示关闭按钮",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "center",
          "describe": "文字是否居中",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "onClose",
          "describe": "关闭时的回调函数, 参数为被关闭的 message 实例",
          "type": "function",
          "emun": "—",
          "default": "—"
        }, {
          "name": "offset",
          "describe": "Message 距离窗口顶部的偏移量",
          "type": "number",
          "emun": "—",
          "default": "20"
        }, {
          "name": "onClick",
          "describe": "点击 Notification 时的回调函数",
          "type": "function",
          "emun": "—",
          "default": "—"
        }, {
          "name": "messageType",
          "describe": "消息提示类型",
          "type": "string",
          "emun": "Message/Notification",
          "default": "Notification"
        }, {
          "name": "globalMessageType",
          "describe": "全局消息提示类型",
          "type": "string",
          "emun": "Message/Notification",
          "default": "—"
        }, {"name": "globalShow", "describe": "是否在全局显示", "type": "boolean", "emun": "—", "default": "TRUE"}],
      methods: [
        {
          "name": "close",
          "describe": "关闭当前的消息提示",
          "params": "—"
        }]
    };

    return {
      btnDesc,
    };
  },
};
</script>

<style lang="stylus">
.DcnBottom {
  .el-row {
    margin-top: 20px;
  }
}
</style>
